import React from 'react'
import classNames from 'classnames'
import './index.css'
// import data from './svgData'

const url = '//at.alicdn.com/t/font_1441751_rth065ck6ar.js'

const svgBaseProps = {
  width: '1em',
  height: '1em',
  fill: 'currentColor',
  'aria-hidden': true,
  focusable: 'false'
}

const IconCreate = ({ url, isCdnMode = false }) => {
  console.info('🍎 ')
  const customCache = new Set()
  function createAndLoadScript() {
    if (!customCache.has(url)) {
      let script = document.createElement('script')
      script.setAttribute('src', url)
      script.innerHTML = '动态加载目标js'
      document.body.appendChild(script)
    }
  }

  function createSvgStyle() {
    let style = document.createElement('style')
    let node = document.createTextNode(
      '.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}'
    )
    style.appendChild(node)
    document.head.appendChild(style)
  }

  function createSvgDiv(svgData) {
    const div = document.createElement('div')
    div.innerHTML = svgData
    const svg = div.getElementsByTagName('svg')[0]
    if (svg) {
      svg.style.position = 'absolute'
      svg.style.width = 0
      svg.style.height = 0
      svg.style.overflow = 'hidden'
    }
    document.body.insertBefore(svg, document.body.firstChild)
  }

  if (isCdnMode) {
    createAndLoadScript()
  } else {
    // console.info(window);
    if (window && !window.__svgLoaded) {
      window.__svgLoaded = true
      createSvgStyle()

      if (!!['complete', 'loaded', 'interactive'].includes(document.readyState)) {
        document.onreadystatechange = null
        // setTimeout(() => createSvgDiv(data), 0)
      } else {
        const foo = () => {
          document.removeEventListener("DOMContentLoaded", foo)
          // createSvgDiv(data)
        }
        document.addEventListener("DOMContentLoaded", foo)
      }
    }
  }

  const SvgIcon = ({ type, width, height, rotate, spin, center, color, className, verticalGap = '3px', horizontalGap = '7px', style, component: Component, ...restProps }) => {
    const rotateStyle = rotate && { transform: `rotate(${rotate}deg)` }

    const svgProps = {
      ...svgBaseProps,
      style: rotateStyle,
      color,
    }
    width && (svgProps.width = width)
    height && (svgProps.height = height)
    Component && Component.props && Component.props.style && (svgProps.style = { ...rotateStyle, ...Component.props.style })

    const iStyle = {
      '--svgIcon-horizontal-gap': horizontalGap,
      '--svgIcon-vertical-gap': verticalGap,
      ...style,
    }

    const iClass =
      classNames(
        {
          [`svgIcon`]: true,
          [`svgIcon-${type}`]: !!(type),
          [`svgIcon-vertical`]: !!(!restProps.horizontal && (restProps.vertical || true)),
          [`svgIcon-horizontal`]: !!(!restProps.vertical && restProps.horizontal),
          [`svgIcon-cursor`]: !!(restProps.onClick),
        },
        className
      )

    const svgClass =
      classNames({
        [`svgIcon-spin`]: !!spin || type === 'loading',
        [`svgIcon-center`]: !!center,
      }, `${Component && Component.props && Component.props.className || ''}`)

    const renderComponent = (Component) => {
      if (typeof Component === 'function') {
        return <Component {...svgProps} className={svgClass} />
      } else {
        // return React.createElement(Component, { ...svgProps, ...Component.props, 'className': svgClass })
        return { ...Component, 'props': { ...svgProps, ...Component.props, 'className': svgClass } }
      }
    }

    return (
      <i {...restProps} className={iClass} style={iStyle}>
        {Component ? renderComponent(Component) : (
          <svg {...svgProps} className={svgClass}>
            <use xlinkHref={`#${type}`} />
          </svg>
        )}
      </i>
    )
  }
  return SvgIcon
}

export default IconCreate({ url, isCdnMode: false })
